<template>
  <div>
    <div id="demo">
      <input type="checkbox" v-model="bool" />
      <input type="text" v-model="text" />
      <p v-show="bool">{{ text }}</p>
      <p v-if="bool">我是于松杨</p>
      <p v-else>我同桌才是于松杨</p>
      <p>{{ val }}</p>
      <p>{{ val1 }}</p>
      <p>{{ val2 }}</p>
      <input @keydown.space="fun()" value="输入space触发按键修饰符" />
      <Demo />
      <Demozi> <p>我是插入的数据</p> </Demozi>
      <h1 ref="setcolor">设置我的颜色</h1>
      <button @click="fun1()">点我改变h1颜色</button><br />
      <button @click="fun2('Zi1')">点我去1</button>
      <button @click="fun2('Zi2')">点我去2</button>
      <button @click="fun2('Zi3')">点我去</button>
      <keep-alive include="Zi1,Zi3">
        <component :is="com"></component
      ></keep-alive>

      <h1 v-color>我是测试自定义指令的</h1>
    </div>
  </div>
</template>

<script>
import Demozi from "./demozi.vue";
import Zi1 from "../demo/zi1";
import Zi2 from "../demo/zi2";
import Zi3 from "../demo/zi3";

export default {
  directives: {
    color: {
      inserted(el) {
        el.style.color = "red";
      },
      bind() {},
      update() {},
      componentUpdate() {},
      unbind() {},
    },
  },
  components: {
    Demozi,
    Zi1,
    Zi2,
    Zi3,
  },
  data() {
    return {
      text: "你好牛逼",
      val: "abcefghigk",
      bool: true,
      com: Zi1,
    };
  },
  methods: {
    fun() {
      console.log("你触发了空格");
    },
    fun1() {
      this.$refs.setcolor.style.color = "pink";
    },
    fun2(data) {
      this.com = data;
    },
  },

  watch: {
    text(newval, oldval) {
      return console.log(newval, oldval);
    },
  },
  //生命周期八个钩子函数
  created() {},
  beforeCreate() {},
  mounted() {},
  beforeMount() {},
  updated() {},
  beforeUpdata() {},
  destoryed() {},
  beforeDestory() {},

  computed: {
    val1() {
      return this.val.toUpperCase();
    },
    val2() {
      return this.val.toUpperCase().substr(1, 5);
    },
  },
};
</script>

<style scoped>
#demo {
  font-size: 0.14rem;
}
h1 {
  font-size: 0.16rem;
}
</style>